<template>
  <div>
    <div ref="returnTop" class="btn" @mousedown.stop="move" @click="backtoAdminPage">
      <img src="@/assets/backBtn.png">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 拖拽返回顶部
      positionX: 0,
      positionY: 0
    }
  },
  methods: {
    backtoAdminPage() {
      const isDrag = this.$refs.returnTop.getAttribute('drag-flag')
      if (isDrag === 'true') {
        return false
      } else {
        this.$router.push({
          path: '/admin'
        })
      }
    },
    move(e) {
      e.preventDefault && e.preventDefault()

      let dragStartTime = ''
      let dragEndTime = ''
      const target = e.target
      target.setAttribute('drag-flag', false)
      dragStartTime = new Date().getTime()
      // 鼠标相对元素的位置
      const disX = e.clientX - target.offsetLeft
      const disY = e.clientY - target.offsetTop
      document.onmousemove = function(e) {
        // 元素的位置
        const left = e.clientX - disX
        const top = e.clientY - disY

        this.positionX = top
        this.positionY = left

        target.style.left = left + 'px'
        target.style.top = top + 'px'
        dragEndTime = new Date().getTime()
        if (dragEndTime - dragStartTime > 300) {
          target.setAttribute('drag-flag', true)
        }
      }
      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }

}
</script>

<style scoped>
  .btn{
    position: fixed;
    top:20%;
    right:20px;
    background:rgba(88, 203, 232,0.5) url('~@/assets/backBtn.png');  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0A2A88, #59CDE9);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0A2A88, #59CDE9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    z-index: 10;

  }
  .btn img{
    width: 40px;
    height: 40px;
    margin-left: 15px;
    margin-top: 15px;
    cursor: pointer;
  }
</style>
